<template>
  <div class="home">
    <Layout>
        <Header class="header">
          <h2 class="logo">智慧社区管理系统</h2>
          <div style="color:#ffffff">欢迎你，<span v-model="adminName">{{adminName}}</span></div>
          <div>                    
            <Button type="primary" icon="ios-log-out" @click="logout">退出</Button>
          </div>
        </Header>
        <Layout class="layout-content">
          <Sider hide-trigger class="sider">
            <Menu active-name="0" width="200px">
              <MenuGroup title="信息管理">
                <MenuItem name="1" to="/user">
                  <Icon type="md-person" />
                  用户管理
                </MenuItem>
                <MenuItem name="2" to="/check">
                  <Icon type="ios-hand" />
                  审核管理
                </MenuItem>
                <MenuItem name="3" to="/outs">
                  <Icon type="md-log-out" />
                  出门记录
                </MenuItem>
                <MenuItem name="4" to="/enter">
                  <Icon type="md-log-in" />
                  进门记录
                </MenuItem>
              </MenuGroup>
              <MenuGroup title="统计分析">
                <MenuItem name="5" to="/health">
                  <Icon type="md-heart" />
                  健康统计
                </MenuItem>
                <MenuItem name="6" to="/computePass">
                  <Icon type="md-podium" />
                  出入统计
                </MenuItem>
              </MenuGroup>
            </Menu>
          </Sider>
          <Content class="content">
            <!-- 路由占位符 -->
             <router-view></router-view>
          </Content>
        </Layout>
        <Footer class="footer">
          <div class="footer-text">
            <b>Designed by Mr.Ning</b>
          </div>
        </Footer>
    </Layout>
  </div>
</template>

<script>
    export default {
      data(){
        return {
          adminName: ""
        }
      },
      created(){
        this.getAdminName()
      },
      methods: {
        async getAdminName(){
          const {data:res} = await this.$http.get('/admin/name')
          if(res.errorCode !== 200) return
          this.adminName=res.data
        },
        async logout(){
          const {data:res} = await this.$http.post('/admin/logout');
          if(res.errorCode !== 200) return this.$message.error(res.errorMsg)
          window.sessionStorage.clear()
          this.$router.push('/login')
          return this.$message.info('退出成功')
        }
      }
    }
</script>

<style>
.home{
  height: 100%;
}
.header {
  background-color: #1b1616;
  justify-content: space-between;
  display: flex;
}
.layout-content{
  height: 710px;
}
.sider{
  background-color: #fff;
}
.content{
  padding: 10px 10px;

}
.logo{
  color: teal;
}
.footer{
  background-color: #1b1616;
}
.footer-text{
  color: teal;
}
</style>